/** *活跃牛人列表 */
<template>
	<div>
	<gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore">
		<div class="wrapper-xs bg-white"></div>
		<div class="hbox cattle-person-table active-box" style="margin-bottom: -12px;height: auto;" v-for="(item,index) in dataList" @click="clickBox(item)">
			<div class="hbox cattle-person-table-box gross-income-box">
				<div class="col head-icon v-middle skip">
					<img v-bind:src="item.headImgUrl" alt="">
				</div>
				<div class="col v-middle skip">
					<div class="color-56">{{item.nickname}}</div>
					<div class="color-9 text-xs">近一月操作<br/><span class="color-blue m-l-xs">{{item.lastmothoptimes}}次</span></div>
				</div>
				<div class="col v-middle text-center skip">
					<div class="cattle-person-table-rate">
						<div class="m-t-sm">总收益率</div>

						<div class="text-lg color-green" v-if="Number(item.total_rate)<0">{{item.total_rate.toFixed(2)}}%</div>

						<div class="text-lg color-red" v-else>{{item.total_rate.toFixed(2)}}%</div>

					</div>
				</div>
				<div class="col v-middle text-center col-x-1 has-btn" @click.stop="collapse(index,item)">
					<div class="cattle-person-circle-arrow-btn" :class="{'cattle-person-circle-arrow-btn-transform':index===expandedIndex}" >
						<i class="iconfont icon-xiangxia"></i>
					</div>
				</div>
			</div>
			<div class="cattle-person-table-hbox-child-ref gross-income-box-ref " :class="{'_show':index===expandedIndex,'_hide':expandedIndex!==index}" style="display:none;">
				<div class="hbox cattle-person-table-hbox-child text-center">
					<div class="col v-middle">
						<div class="color-9">胜率</div>
						<div class="color-56 text-lg">{{item.victories.toFixed(2)}}%</div>
					</div>
					<div class="col v-middle">
						<div class="color-9">最大回撤</div>
						<div class="color-56 text-lg">{{item.withdraw.toFixed(2)}}%</div>
					</div>
					<div class="col v-middle text-center gross-income-oper"  @click.stop="subscribe(item,index)" data="00">
			            <div class="cattle-person-circle-btn">
			                <i class="iconfont " :class="{'icon-x':item.subscribed,'icon-dingyue':!item.subscribed}"></i>
			            </div>
			            <div><span class="color-9 text-xs" v-text="item.subscribed?'取消订阅':'订阅'"></span></div>
			        </div>
				</div>
			</div>
		</div>
	</gj-loadmore>
	<subscribe-cancel-modal></subscribe-cancel-modal>
	<subscribe-modal></subscribe-modal>
	</div>
</template>

<script>
	import RemoteDAO from 'common/remoteDAO'
	import LocalDAO from 'common/localDAO'
	import CommonUtil from 'common/common.util'
	import LoadMore from 'components/LoadMore'
	import SubscribeCancelModal from 'components/modal/SubscribeCancelModal'
	import SubscribeModal from 'components/modal/SubscribeModal'
	export default {
		data() {
			return {
				msg:'',
				userCode: '',
				nickName: '',
				pageObj: {
					pageNum: 0,
					pageSize: 10,
				},
				defUserHead: '',
				expandedIndex: '',
				dataList:[],
				subsChecked: {},
				count:0,
				bottomPullText:"向上滑动更多牛人"
			}
		},
		components: {
			'subscribe-cancel-modal': SubscribeCancelModal,
			'subscribe-modal': SubscribeModal,
			'gj-loadmore':LoadMore
		},
		updated(){
			$("._show").slideDown(500)
			$("._hide").slideUp(500)
		},
		methods: {
			subscribeCancelModal(relationUserCode,callback) {
				//订阅需传递要订阅的用户的userCode 即relationUserCode   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeCancelModal', relationUserCode: relationUserCode, callback});
			},
			subscribeModal(relationUserCode,callback) {
				//取消需传递订阅的用户的userCode 即relationUserCode;   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeModal', relationUserCode: relationUserCode, callback});
			},
			isEmpty(data) {
				return data == null || data == undefined;
			},
			collapse(index, item) {
				var vm = this;
				vm.msg=item;
				vm.expandedIndex = index === vm.expandedIndex ? '' : index;
				var userCode = vm.dataList[index].client_id;
				if(vm.expandedIndex>=0 && (!vm.subsChecked[userCode]) && vm.nickName){
					vm.checkSubscription(userCode,item,index);
				}
			},
			loadBottom() {
	      		let vm = this;

		        vm.fetchData(function (allLoaded,error) {
		          if(error){
		            vm.$refs.loadmore.onBottomError(error);//单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
		          }else if (allLoaded) {
		            vm.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
		          } else {
		            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
		          }
		        });
		      },
		      loadTop(){
		      	var vm = this;

		      	setTimeout(function() {
		      		vm.$refs.loadmore.onTopLoaded();
		      	},1000)
		      },
			//获取列表数据
			fetchData(afterFetchData) {
				var vm = this,
					error,
					allLoaded;
				//请求开始显示loading
				//		         $(to).append(CommonUtil.getLoadingSpin());
				var startDete = new Date(); //
				console.log("调用30012开始");
				RemoteDAO.callJCL30012("0", (vm.pageObj.pageNum * vm.pageObj.pageSize), (vm.pageObj.pageNum + 1)*vm.pageObj.pageSize, vm.userCode, function(response) {

					if(response.error == "0") {
						var result = decrypt.json2(response.data);
						var body = JSON.parse(result).body;
	
						body = body || {};
						body.data.forEach(function(item) {
							item.headImgUrl = "";
							item.subscribed = "";
						});
						vm.getHeadPortraits(body.data); //获取头像
						vm.dataList = vm.dataList.concat(body.data || []);

			            if(vm.dataList.length == 0){
              				error = '暂无数据'
            			}else if (body.data.length < vm.pageObj.pageSize){
              				allLoaded = true
            			}

		                vm.msg=body.data
		                if(!allLoaded){
		                	vm.pageObj.pageNum++;
		                };
					} else{
     					error = response.data;
  					}

  					afterFetchData(allLoaded, error);
				});
			},
			//点击整行
			clickBox(item) {
				item.expandedIndex = '';
				var self = this;
//				var target = e.currentTarget;
//				var clientId = target.getAttribute('data-clientId');
				self.$router.push({ path: '/otherdetail', query: { userCode: item.client_id } })

				var userCode = LocalDAO.getUserCode();
				var kv = { "usercode": userCode, "k2": "" };
				TDAPP.onEvent("15003", "", kv);
				TDAPP.send();

			},
			//查询是否订阅
			checkSubscription(relationUserCode, item, index) {
				var vm = this;
				RemoteDAO.callUC12008309(vm.userCode, "1", "1", "3", "1", "1", "", relationUserCode, "0", function(resp) {
					//标识已经查询过
					vm.subsChecked[relationUserCode] = true;
					item.subscribed = '';
					resp = resp || {};
					var data = resp.data || {};
					var body = data.body;
					//body 不为空且返回集合大于0 说明已经订阅过
					item.subscribed = !CommonUtil.isEmpty(body) && body.length > 0;
//					item.subscribed=true;
				})
			},
			//订阅
			subscribe(item, index) {
				var vm = this;
				if(!LocalDAO.getNickname()) {
					var kv = { "usercode": "", "k2": "" };
					TDAPP.onEvent("2015", "", kv);
					TDAPP.send();
					//注册或登录
					RemoteDAO.callNativeLogin(function(response) {
						if(response.error == 0) {
              vm.$store.dispatch('setTip',{text: "已为您登录，请重新查看点击"});
              setTimeout(function () {
                window.location.reload(true);
              },1000)
						} else {
							vm.$store.dispatch('setTip',{text:response.data})
						}
					});
				} else {
					var relationUserCode = item.client_id;
					if(item.subscribed) {
						vm.subscribeCancelModal(relationUserCode,function(response){
							if(Number(response.error) == 0){
								item.subscribed = false
							}
						})
						//取消订阅弹窗
					} else {
						//订阅弹窗
						vm.subscribeModal(relationUserCode,function(response){
							if(Number(response.error) == 0){
								item.subscribed = true
							}
						})
					}
				}
			},
			//批量获取头像
			getHeadPortraits(dataList) {
				var vm = this,
					userCodes;

				userCodes = dataList.map(function(item) {
					return item.client_id;
				}).join(',');

				if(userCodes) {
					RemoteDAO.callUC12008316(vm.userCode, userCodes, function(resp) {
						if(resp.error == "0") {
							var body = resp.data.body || [];
							for(var i = 0; i < body.length; i++) {
								var usercode = body[i].USER_CODE;
								var headImgUrl = body[i].USER_HEAD || CommonUtil.getDefaultUserHead(usercode);
								for(var j = 0; j < dataList.length; j++) {
									if(dataList[j].client_id == usercode) {
										dataList[j].headImgUrl = headImgUrl;
									}
								}
							}
						}
					});
				}
			}
		},
		created() {
			var vm = this;

			vm.userCode = LocalDAO.getUserCode(); //用户ID
			vm.nickName = LocalDAO.getNickname(); //用户名
//			vm.fetchData();
		}
	}
</script>
<style>
	/*.showBox{
		transition:all
	}*/

	.hide-content-show {
		transition: all 2s linear;
		/*ease-in: cubic-bezier(0.42, 0, 1.0, 1.0);*/
	}
</style>
